<template>
	<view class="page-cont">
		<navbar :title="facilityName"></navbar>
		<scroll-view class="main-cont" :style="{height: pageHeight}">
			<!-- 项目切换 -->
			<view class="project-select" @click="handleOpen">
				<view class="project-name">{{typeName}}</view>
				<image class="project-arrow" :src="isOpen ? '/static/up_black.png' : '/static/down_black.png'"></image>
			</view>
			<!-- 折线 -->
			<view class="chart-cont">
				<view class="chart-header">
					<view>时间筛选：</view>
					<uni-datetime-picker v-model="currentTime" type="date" :clear-icon="false" @change="handleDateChange" />
				</view>
				<view class="chart-box">
					<image class="chart-fullscreen" src="/static/fullscreen.png" @click="handleFullscreen"></image>
					<fan-chart :chartData="chartData" :chartTitle="chartTitle" :isSwitch="isSwitch"></fan-chart>
				</view>
			</view>
		</scroll-view>
		<!-- 弹框选择项目 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in typeList" :key="index" @click="handleTypeChange(item)">{{item.name}}</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, getCurrentInstance, watch } from 'vue';
	import { onShow, onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
	import { storeToRefs } from 'pinia';
	import { getDataHistory } from "@/api/home.js";
	import { useNavbar } from "@/utils/hooks.js";
	import useHomeStore from '@/store/home';
	const homeStore = useHomeStore();
	import FanChart from "./components/fan-chart.vue"
	const { proxy } = getCurrentInstance();
	const { pageHeight } = useNavbar();
	const { deviceType, facilityName, facilityId, facilityList } = storeToRefs(homeStore);
	const popup = ref()
	const isOpen = ref(false)
	const isSwitch = ref(true)
	const typeList = ref([])
	const typeName = ref("")
	const datamapping = ref("")
	const currentTime = ref("")
	const chartData = ref([])
	const chartTitle = ref('')

	onLoad(() => {
		initData();
	});

	function initData() {
		let obj = {};
		facilityList.value.forEach(element => {
			if (element.id == facilityId.value) {
				obj = element;
			}
		});

		typeList.value = [];
		if (deviceType.value == "26") {
			//风机：化霜、制冷
			chartTitle.value = "冷间温度";
			isSwitch.value = false;
			typeList.value = [{ name: '制冷', type: '0', id: `26_${obj['uri']}_${obj['id']}_0` }, { name: '化霜', type: '1', id: `26_${obj['uri']}_${obj['id']}_1` }];
		}
		if (deviceType.value == "27") {
			//灯
			chartTitle.value = "运行状态";
			typeList.value = [{ name: '运行状态', type: '0', id: `27_${obj['uri']}_${obj['id']}_0` }];
		}
		if (deviceType.value == "24") {
			//门
			chartTitle.value = "运行状态";
			typeList.value = [];
			typeList.value = [{ name: '运行状态', type: '0', id: `24_${obj['uri']}_${obj['id']}_0` }];
		}
		if (deviceType.value == "41") {
			//压缩机
			chartTitle.value = "运行状态";
			typeList.value = [];
			typeList.value = [{ name: '运行状态', type: '0', id: `41_${obj['uri']}_${obj['id']}_0` }];
		}
		if (deviceType.value == "31") {
			//水泵
			chartTitle.value = "运行状态";
			typeList.value = [];
			typeList.value = [{ name: '运行状态', type: '0', id: `31_${obj['uri']}_${obj['id']}_0` }];
		}
		if (deviceType.value == "32") {
			//风扇
			chartTitle.value = "运行状态";
			typeList.value = [];
			typeList.value = [{ name: '运行状态', type: '0', id: `32_${obj['uri']}_${obj['id']}_0` }];
		}
		
		if (typeList.value.length) {
			datamapping.value = typeList.value[0].id;
			typeName.value = typeList.value[0].name;
		}
		currentTime.value = proxy.dayjs().format("YYYY-MM-DD")
		getList();
	}

	// 获取列表数据
	function getList() {
		const startTime = proxy.dayjs(currentTime.value).startOf('day').format("YYYY-MM-DD HH:mm:ss");//当月的第一天
		const endTime = proxy.dayjs(currentTime.value).endOf('day').format("YYYY-MM-DD HH:mm:ss");//当月的最后一天
		let params = {
			keys: [datamapping.value],
			startTime: startTime,
			endTime: endTime
		};
		getDataHistory(params).then(res => {
			chartData.value = [];
			let arr = res[datamapping.value];
			if (arr && arr.length) {
				arr.forEach(element => {
					if (element && element.length) {
						chartData.value.push({
							time: proxy.dayjs(element[0]).format("HH:mm"),
							num: element[1],
						});
					}
				});
			}
		});
	}

	// 下拉选择设施类型
	function handleOpen() {
		isOpen.value = true;
		popup.value.open();
	}
	// 设施类型选中
	function handleTypeChange(item) {
		isOpen.value = false;
		popup.value.close();
		datamapping.value = item.id;
		typeName.value = item.name;
		getList();
	}
	// 时间筛选
	function handleDateChange() {
		getList();
	}
	// 全屏
	function handleFullscreen(e) {
		uni.navigateTo({
			url: '/pages/home/fan-detail-landscape'
		});
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			overflow: hidden;
			overflow-y: auto;
		}

		.project-select {
			height: 40px;
			line-height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			border-bottom: 1px solid #ccc;

			.project-name {
				color: #666;
				font-size: 14px;
			}

			.project-arrow {
				padding-left: 10px;
				width: 16px;
				height: 16px;
			}
		}

		.chart-cont {
			padding: 15px 10px;
		}

		.chart-header {
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.chart-box {
			border: 1px solid #FAFAFC;
			border-radius: 5px;
			background-color: #fff;
		}

		.chart-fullscreen {
			position: relative;
			left: calc(100% - 40px);
			padding: 10px;
			width: 40px;
			height: 40px;
			box-sizing: border-box;
		}
	}

	.popup-cont {
		background: #fff;
		max-width: 80vh;

		.popup-title,
		.popup-header {
			height: 50px;
			line-height: 50px;
			color: #333;
			font-size: 14px;
			text-align: center;
			border-top: 1px solid #eee;
		}

		.popup-header {
			font-size: 16px;
			font-weight: 600;
		}
	}
</style>